<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false"%>
<html>
<head>
    <title>Listado de facturas</title>
    <style type="text/css" media="all">
          @import url("<spring:url value="/resources/css/efacturas.css"/>");
    </style>
</head>
<body>

<script type="text/javascript">

function previousPage(){
    document.location = "/${urlPrefix}/Navigate?newPage=previous"; 
}

function nextPage(){
    document.location = "/${urlPrefix}/Navigate?newPage=next"; 
}

</script>

<div id="container">

    <jsp:include page="header.jsp" />

    <jsp:include page="navigation.jsp" />    

    <div id="content">
    
    	<jsp:include page="search.jsp" />
    
        <div id="heading" >
            Encontradas [ ${billingList.nrOfElements} ] entradas    &nbsp; | &nbsp;        Mostrando pagina [${billingList.page + 1}] de [${billingList.pageCount}]    
        </div>
    
        <div id="navigation" >
            <ul>
                <li><a href="/billing/list">Anterior</a></li>
                <li><a href="/billing/list">Siguiente</a></li>
                <li><a>Page size:
                    <select id="pageSizeSelect" >
                        <option value="10" <c:if test="${billingList.pageSize == 10}">selected</c:if>>10</option>
                        <option value="25" <c:if test="${billingList.pageSize == 25}">selected</c:if>>25</option>
                        <option value="50" <c:if test="${billingList.pageSize == 50}">selected</c:if>>50</option>
                    </select></a>
                 </li>            
                        
                <script>
                    var selectmenu=document.getElementById("pageSizeSelect")
                    selectmenu.onchange=function(){ 
                        var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
                        document.location = "/${urlPrefix}/SetPageSize?pageSize=" + chosenoption.value;                                   
                    }
                </script>        
            </ul>
        </div>
    
    
    
   <table style="border: 1px; cell-padding: 2px; width: 95%">
    
    <tr>
            <th align="center"></th>
             <th align="center" width="2%"><a href="/${urlPrefix}/SetPageOrder?pageOrder=id&ascending=true" >#</a></th>
             <th align="center"><a href="/${urlPrefix}/SetPageOrder?pageOrder=date&ascending=true" >Fecha</a></th>
             <th align="center"><a href="/${urlPrefix}/SetPageOrder?pageOrder=concept.id&ascending=true" >Categoria</a></th>
             <th align="center">Descripcion</th> 
             <th align="center"><a href="/${urlPrefix}/SetPageOrder?pageOrder=amount&ascending=true" >Cantidad</a></th>
             <th align="center"><a href="/${urlPrefix}/SetPageOrder?pageOrder=payer.firstFamilyName&ascending=true" >Pagador</a></th>
             <th align="center"><a href="/${urlPrefix}/SetPageOrder?pageOrder=payee.firstFamilyName&ascending=true" >Beneficiario</a></th>
             <th align="center"></th>
             <th align="center"></th>
       </tr>
             
          <c:forEach var="bill" items="${billingList.pageList}">
        <tr>
            <td align="center"><input type= "checkbox" /></td>
              <td align="center">${bill.id}</td>
              <td align="right">${bill.date}</td>
              <td align="right">${bill.concept.description}</td>
              <td align="right">${bill.description}</td>
              <td align="right">${bill.amount}</td>
              <td align="right">${bill.payer.firstFamilyName} ${bill.payer.secondFamilyName}, ${bill.payer.firstName}</td>
              <td align="right">${bill.payee.firstFamilyName} ${bill.payee.secondFamilyName}, ${bill.payee.firstName}</td>
              <td align="right"><a href="">Editar</a></td>
              <td align="right"><a href="">Borrar</a></td>
                
        </tr>
          </c:forEach>
    </table>
    
    </div>
    <div id="footer">
        Copyright © Victor Ferrer, 2012
    </div>
</div>



</body>
</html>